<template>
	<view class="back-top">
		<view
			v-if="btnFlag"
			class="go-top  iconfont icon-qudingbu"
			@click="backTop"
		></view>
	</view>
</template>

<script>
export default {
	name: 'BackTop',
	data() {
		return {
			btnFlag: false,
			scrollTop: 0
		};
	},
	// vue的两个生命钩子，这里不多解释。
	// window对象，所有浏览器都支持window对象。它表示浏览器窗口，监听滚动事件
	mounted() {
		window.addEventListener('scroll', this.scrollToTop);
	},
	destroyed() {
		window.removeEventListener('scroll', this.scrollToTop);
	},

	methods: {
		// 点击图片回到顶部方法，加计时器是为了过渡顺滑
		backTop() {
			const that = this;
			let timer = setInterval(() => {
				let ispeed = Math.floor(-that.scrollTop / 5);
				document.documentElement.scrollTop = document.body.scrollTop =
					that.scrollTop + ispeed;
				if (that.scrollTop === 0) {
					clearInterval(timer);
				}
			}, 16);
		},

		// 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
		scrollToTop() {
			const that = this;
			let scrollTop =
				window.pageYOffset ||
				document.documentElement.scrollTop ||
				document.body.scrollTop;
			that.scrollTop = scrollTop;
			if (that.scrollTop > 0) {
				that.btnFlag = true;
			} else {
				that.btnFlag = false;
			}
		}
	}
};
</script>

<style scoped lang="scss">
.back-top {

position: fixed;
	bottom: 100px;
	right: 10px;
	z-index: 99;	
}

.back-top view {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	box-shadow: 0 1px 1px rgba(100, 100, 100, 0.8);
}
</style>
